<template>
  <div class="theme-toggle">
    <el-dropdown 
      trigger="click" 
      placement="bottom-end"
      @command="handleThemeChange"
    >
      <el-button >
        <i :class="themeIcon"></i>
        {{ themeText }}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item 
            v-for="theme in themeOptions" 
            :key="theme.name"
            :command="theme.name"
            :class="{ 'active': currentTheme === theme.name }"
          >
            <div class="theme-option">
              <div class="theme-preview" :style="getPreviewStyle(theme)"></div>
              <span class="theme-name">{{ theme.label }}</span>
              <i v-if="currentTheme === theme.name" class="el-icon-check active-icon"></i>
            </div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAppStore } from '../stores/app'
import { userApi } from '@/api/user'

const appStore = useAppStore()

const currentTheme = computed(() => appStore.theme)

const themeIcon = computed(() => {
  const icons: Record<string, string> = {
    light: 'el-icon-sunny',
    dark: 'el-icon-moon',
    blue: 'el-icon-cloudy',
    green: 'el-icon-goblet-square-full',
    purple: 'el-icon-goblet',
    orange: 'el-icon-orange'
  }
  return icons[currentTheme.value] || 'el-icon-sunny'
})

const themeText = computed(() => {
  const texts: Record<string, string> = {
    light: '亮色主题',
    dark: '暗色主题',
    blue: '蓝色主题',
    green: '绿色主题',
    purple: '紫色主题',
    orange: '橙色主题'
  }
  return texts[currentTheme.value] || '主题切换'
})

const themeOptions = [
  {
    name: 'light',
    label: '亮色主题',
    primaryColor: '#409EFF',
    bgColor: '#f5f7fa',
    sidebarBg: '#304156'
  },
  {
    name: 'dark',
    label: '暗色主题',
    primaryColor: '#66b1ff',
    bgColor: '#141414',
    sidebarBg: '#001529'
  },
  {
    name: 'blue',
    label: '蓝色主题',
    primaryColor: '#1890ff',
    bgColor: '#f0f2f5',
    sidebarBg: '#001529'
  },
  {
    name: 'green',
    label: '绿色主题',
    primaryColor: '#52c41a',
    bgColor: '#f6ffed',
    sidebarBg: '#001f0f'
  },
  {
    name: 'purple',
    label: '紫色主题',
    primaryColor: '#722ed1',
    bgColor: '#f9f0ff',
    sidebarBg: '#130824'
  },
  {
    name: 'orange',
    label: '橙色主题',
    primaryColor: '#fa8c16',
    bgColor: '#fff7e6',
    sidebarBg: '#612500'
  }
]

const getPreviewStyle = (theme: any) => {
  return {
    background: `linear-gradient(135deg, ${theme.primaryColor} 0%, ${theme.sidebarBg} 100%)`
  }
}

let user = localStorage.getItem('user')

const handleThemeChange = (themeName: string) => {
  if(user){
    let users = JSON.parse(user)
    userApi.updateTheme({theme:themeName,id:users.id}).then((res)=>{
      localStorage.setItem('user',JSON.stringify(res.data))
      localStorage.setItem('token',res.data.access_token)
    })
  }

  appStore.setTheme(themeName)
}


if(user){
  let users = JSON.parse(user)
  if(users)handleThemeChange(users.theme)
}else{
  handleThemeChange('light')
}
</script>

<style scoped>
.theme-toggle {
  display: inline-block;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.theme-preview {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.theme-name {
  flex: 1;
}

.active-icon {
  color: var(--primary-color);
}

.el-dropdown-menu .active {
  background-color: rgba(64, 158, 255, 0.1);
}
</style>